<template>
	<view class="uContainer" :style="{pointerEvents: (is_loading>0?'none':'unset')}">
		<slot name="uContainer" v-if="is_login"></slot>
		<zkLoading></zkLoading>
		<zkToast ref="toast"></zkToast>
		<zkModal ref="modal"></zkModal>
	</view>
</template>

<script>
	import zkLoading from '/components/zkLoading/zkLoading3.vue';
	import zkToast from "/components/zkToast/zkToast.vue"
	import zkModal from "/components/zkModal/zkModal.vue"
	export default {
		components: {
			zkLoading,
			zkToast,
			zkModal
		},
		data() {
			return {};
		},
		computed: {
			is_loading() {
				return this.$store.state.loading;
			},
			is_login() {
				const routes = getCurrentPages();
				const currentPage = `/${routes[routes.length - 1].route}`;
				if (currentPage === '/pages/home/index/index') {
					return this.$store.state.login.token;
				} else {
					return true;
				}
			}
		},
		methods: {
			async showToast(opts) {
				await this.$refs.toast.show(opts);
			},
			showModal(opts) {
				return this.$refs.modal.show(opts);
			}
		}
	}
</script>

<style lang="scss">
	.uContainer {
		width: 100%;
		height: calc(100% - env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		// background: $uni-primary;
		background: linear-gradient(to bottom, $uni-primary 0%, #fff 30%, #fff 100%);
		overflow: auto;

		>view {
			width: 100%;
			height: 100%;
		}

		.container {
			width: 100%;
			overflow: auto;
		}
	}
</style>